<template>
  <div class="conversation-info">
    <header>
      <label>
        群名
        <input type="text" :placeholder="conversationInfo.conversation._target._displayName">
      </label>
      <label>
        群公告
        <input type="text" disabled
               :placeholder="groupAnnouncement">
      </label>
    </header>
    <div class="search-item">
      <input type="text" v-model="filterQuery" placeholder="搜索">
      <i class="icon-ion-ios-search"></i>
    </div>
    <div class="member-container">
      <div v-if="enableAddGroupMember && !filterQuery" @click="showCreateConversationModal" class="action-item">
        <div class="icon">+</div>
        <p>添加成员</p>
      </div>
      <div v-if="enableRemoveGroupMember && !filterQuery" @click="showRemoveGroupMemberModal" class="action-item">
        <div class="icon">-</div>
        <p>移除成员</p>
      </div>
      <UserListVue :users="users"
                   :show-category-label="false"
                   :padding-left="'20px'"
      />
    </div>
    <div @click="quitGroup" class="quit-group-item">
      退出群聊
    </div>
  </div>
</template>

<script>
import UserListVue from "@/ui/main/user/UserListVue";
import ConversationInfo from "@/wfc/model/conversationInfo";
import store from "@/store";
import PickUserView from "@/ui/main/pick/PickUserView";
import wfc from "@/wfc/client/wfc";
import axios from "axios";
import GroupMemberType from "@/wfc/model/groupMemberType";
import GroupType from "@/wfc/model/groupType";

export default {
  name: "GroupConversationInfoView",
  props: {
    conversationInfo: {
      type: ConversationInfo,
      required: true,
    }
  },
  data() {
    return {
      groupMemberUserInfos: store.getConversationMemberUsrInfos(this.conversationInfo.conversation),
      filterQuery: '',
      sharedContactState: store.state.contact,
      groupAnnouncement: '',
    }
  },
  components: {UserListVue},
  methods: {
    showCreateConversationModal() {

      let beforeOpen = (event) => {
        console.log('Opening...')
      };
      let beforeClose = (event) => {
        console.log('Closing...', event, event.params)
        if (event.params.confirm) {
          let newPickedUsers = event.params.users;
          let ids = newPickedUsers.map(u => u.uid);
          wfc.addGroupMembers(this.conversationInfo.conversation.target, ids, [0])
        }
      };
      let closed = (event) => {
        console.log('Close...', event)
      };
      let groupMemberUserInfos = store.getGroupMemberUserInfos(this.conversationInfo.conversation.target, false);
      this.$modal.show(
          PickUserView,
          {
            users: this.sharedContactState.favContactList.concat(this.sharedContactState.friendList),
            initialCheckedUsers: groupMemberUserInfos,
            uncheckableUsers: groupMemberUserInfos,
            confirmTitle: '添加',
          }, {
            name: 'pick-user-modal',
            width: 600,
            height: 480,
            clickToClose: false,
          }, {
            'before-open': beforeOpen,
            'before-close': beforeClose,
            'closed': closed,
          })
    },

    showRemoveGroupMemberModal() {
      let beforeOpen = (event) => {
        console.log('Opening...')
      };
      let beforeClose = (event) => {
        console.log('Closing...', event, event.params)
        if (event.params.confirm) {
          let newPickedUsers = event.params.users;
          let ids = newPickedUsers.map(u => u.uid);
          wfc.kickoffGroupMembers(this.conversationInfo.conversation.target, ids, [0])
        }
      };
      let closed = (event) => {
        console.log('Close...', event)
      };
      let groupMemberUserInfos = store.getGroupMemberUserInfos(this.conversationInfo.conversation.target, false);
      this.$modal.show(
          PickUserView,
          {
            users: groupMemberUserInfos,
            confirmTitle: '移除',
          }, {
            name: 'pick-user-modal',
            width: 600,
            height: 480,
            clickToClose: false,
          }, {
            'before-open': beforeOpen,
            'before-close': beforeClose,
            'closed': closed,
          })

    },

    showUserInfo(user) {
      console.log('todo show userInfo', user);
    },

    async getGroupAnnouncement() {
      let response = await axios.post('/get_group_announcement', {
        groupId: this.conversationInfo.conversation.target,
      }, {withCredentials: true});
      if (response.data && response.data.result) {
        this.groupAnnouncement = response.data.result.text;
      } else {
        this.groupAnnouncement = '点击编辑群公告';
      }
    },

    quitGroup() {
      store.quitGroup(this.conversationInfo.conversation.target)
    },
  },

  created() {
    this.getGroupAnnouncement();
  },

  computed: {
    enableAddGroupMember() {
      let selfUid = wfc.getUserId();
      let groupInfo = this.conversationInfo.conversation._target;
      //在group type为Restricted时，0 开放加入权限（群成员可以拉人，用户也可以主动加入）；1 只能群成员拉人入群；2 只能群管理拉人入群
      if (groupInfo.type === GroupType.Restricted) {
        if (groupInfo.joinType === 0 || groupInfo.joinType === 1) {
          return true;
        } else if (groupInfo.joinType === 2) {
          let groupMember = wfc.getGroupMember(this.conversationInfo.conversation.target, selfUid);
          return [GroupMemberType.Manager, GroupMemberType.Owner].indexOf(groupMember.type) >= 0;
        }
      }
      return true;
    },

    enableRemoveGroupMember() {
      let selfUid = wfc.getUserId();
      let groupMember = wfc.getGroupMember(this.conversationInfo.conversation.target, selfUid);
      return [GroupMemberType.Manager, GroupMemberType.Owner].indexOf(groupMember.type) >= 0;

    },

    users() {
      if (this.filterQuery) {
        return store.filterUsers(this.groupMemberUserInfos, this.filterQuery)
      } else {
        return this.groupMemberUserInfos;
      }
    }
  },
};
</script>

<style lang="css" scoped>
.conversation-info {
  display: flex;
  flex-direction: column;
  position: relative;
  justify-content: flex-start;
  height: 100%;
  overflow: hidden;
}

header {
  padding-left: 20px;
  padding-right: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

header label {
  width: 100%;
  display: flex;
  margin-top: 15px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  font-size: 14px;
  color: #999999;
}

header label:last-of-type {
  padding-bottom: 15px;
  border-bottom: 1px solid #ececec;
}

header label input {
  flex: 1;
  margin-top: 5px;
  border: none;
  outline: none;
  width: 100%;
  font-size: 13px;
  background-color: transparent;
}

.member-container {
  flex: 1;
  overflow: auto;
}

.search-item {
  position: relative;
  padding: 10px 20px;
}

.search-item input {
  width: 100%;
  padding: 0 10px 0 20px;
  height: 25px;
  border-radius: 3px;
  border: 1px solid #ededed;
  background-color: white;
  text-align: left;
  outline: none;
}

.search-item input:active {
  border: 1px solid #4168e0;
}

.search-item input:focus {
  border: 1px solid #4168e0;
}

.search-item i {
  position: absolute;
  left: 25px;
  top: 15px;
}

.action-item {
  height: 50px;
  display: flex;
  padding-left: 20px;
  align-items: center;
}

.action-item .icon {
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 3px;
  border: 1px dashed #d6d6d6;
}

.action-item img {
  width: 40px;
  height: 40px;
}

.action-item p {
  margin-left: 10px;
  font-size: 13px;
}

.action-item:active {
  background-color: #d6d6d6;
}

.quit-group-item {
  display: flex;
  color: red;
  align-items: center;
  justify-content: center;
  height: 50px;
  max-height: 50px;
  border-top: 1px solid #ececec;
}

.quit-group-item:active {
  background: #d6d6d6;
}

</style>
